<template>
	<div class="wrap" v-if="baseMap">
		<!-- 医院信息 -->
		<div class="top">
			<span class="hosname">{{ baseMap.hosname }}</span>
			<span class="line">|</span>
			<span>{{ baseMap.bigname }}</span>
			<span class="dot"></span>
			<span class="hosdeparment">{{ baseMap.depname }}</span>
		</div>
		<!-- 放号信息 -->
		<div class="center">
			<div class="time">{{ baseMap.workDateString }}</div>
			<div class="container">
				<div
					class="item"
					:class="{
						not: item.status === -1 || (item.status === 0 && item.availableNumber === -1),
						active: item.workDate === workTime?.workDate,
					}"
					v-for="item in bookingScheduleList"
					:key="item.workDate"
					@click="changeDate(item)">
					<div class="item_top">
						<span class="date">{{ item.workDate }}</span>
						<span class="week">{{ item.dayOfWeek }}</span>
					</div>
					<div class="item_bottom">
						<span v-if="item.status === -1">停止挂号</span>
						<span v-else-if="item.status === 1">即将放号</span>
						<span v-else-if="item.status === 0 && item.availableNumber === -1">约满了</span>
						<span v-else>有号({{ item.availableNumber }})</span>
					</div>
				</div>
			</div>
			<el-pagination
				layout="prev, pager, next"
				:total="total"
				:page-size="limit"
				v-model:current-page="page"
				@current-change="currentChange" />
		</div>
		<!-- 医生信息 -->
		<div class="bottom" v-loading="doctorData_isLoading">
			<div class="will" v-if="workTime?.status === 1">
				<span class="blue">2023年6月3日08:30</span><span>放号</span>
			</div>
			<div class="doctor" v-else>
				<div class="time_range morning">
					<div class="tip">
						<svg
							t="1691999578498"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="4388"
							width="24"
							height="24">
							<path
								d="M904.101037 676.946871H118.670712c-15.461511 0-28.105271-12.535384-28.105271-28.033021 0-15.461511 12.643759-28.105271 28.105271-28.10527h785.430325c15.461511 0 28.105271 12.643759 28.105271 28.10527s-12.607634 28.033021-28.105271 28.033021z m-56.029916-324.980738c-11.018133 10.945883-28.719396 10.945883-39.665279 0-11.018133-10.945883-11.018133-28.755521 0-39.665279l39.665279-39.665279a27.97522 27.97522 0 0 1 39.593029 0 27.93187 27.93187 0 0 1 0 39.665279l-39.593029 39.665279z m-62.279545 212.776406c-26.082269-128.027094-138.683977-224.444789-274.441826-224.44479-135.649474 0-248.287307 96.417696-274.369576 224.44479H177.915755c21.602766-158.263741 162.454244-280.583081 333.433995-280.583081 171.088125 0 311.903478 122.31934 333.506244 280.583081h-59.064418z m-274.441826-336.612997c-15.461511 0-28.033021-12.535384-28.033021-28.10527V143.95823c0-15.461511 12.535384-28.105271 28.033021-28.10527 15.569886 0 28.105271 12.643759 28.10527 28.10527v56.029916c0 15.606011-12.535384 28.141396-28.10527 28.141396zM174.700628 351.966133L135.035349 312.264729c-10.945883-10.945883-10.945883-28.755521 0-39.665279 11.018133-10.945883 28.719396-10.945883 39.665279 0l39.665279 39.665279a27.93187 27.93187 0 0 1 0 39.665279c-10.909758 10.982008-28.647146 10.982008-39.665279 0.036125z m-28.033021 381.119029h729.40041c15.497636 0 28.033021 12.535384 28.03302 28.03302a28.033021 28.033021 0 0 1-28.03302 28.033021H146.667607c-15.497636 0-28.033021-12.535384-28.03302-28.033021 0.036125-15.497636 12.571509-28.033021 28.03302-28.03302z m84.171312 112.168207h561.093911c15.497636 0 28.033021 12.535384 28.033021 28.033021 0 15.569886-12.535384 28.105271-28.033021 28.10527H230.838919c-15.497636 0-28.033021-12.535384-28.03302-28.10527 0-15.497636 12.535384-28.033021 28.03302-28.033021z"
								fill="#1296db"
								p-id="4389"></path>
						</svg>
						上午号源
					</div>
					<!-- 每一个医生的信息 -->
					<template v-if="!isRegistration">
						<div class="doctor_list" v-for="item in doctorData.morning" :key="item.createTime">
							<div class="left">
								<p class="item_info">
									<span>{{ item.title }}</span>
									<span class="m">|</span>
									<span>{{ item.docname }}</span>
								</p>
								<p class="skills gray">{{ item.skill }}</p>
							</div>
							<div class="right">
								<span class="money">￥{{ item.amount }}</span>
								<el-button
									:type="isRegistration ? 'info' : 'primary'"
									:disabled="isRegistration"
									@click="goStep2(item)">
									剩余{{ item.availableNumber }}
								</el-button>
							</div>
						</div>
					</template>
				</div>
				<div class="time_range afternoon">
					<div class="tip">
						<svg
							t="1691999885267"
							class="icon"
							viewBox="0 0 1024 1024"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							p-id="7289"
							width="24"
							height="24">
							<path
								d="M426.666667 512v85.333333H170.666667v-85.333333h85.333333a256 256 0 1 1 256 256v-85.333333a170.666667 170.666667 0 1 0-170.666667-170.666667h85.333334z m213.333333 341.333333v85.333334H256v-85.333334h384z m-213.333333-170.666666v85.333333H85.333333v-85.333333h341.333334z m128-640v128h-85.333334V42.666667h85.333334zM210.304 149.973333L300.8 240.469333 240.469333 300.8 149.973333 210.346667v-0.042667l60.330667-60.330667zM783.530667 723.2l90.496 90.496-60.330667 60.330667-90.496-90.496 60.330667-60.330667z m90.496-512.896L783.530667 300.8 723.2 240.469333l90.496-90.496v-0.042666l60.330667 60.373333zM981.333333 554.666667h-128v-85.333334h128v85.333334z"
								fill="#1296db"
								p-id="7290"></path>
						</svg>
						下午号源
					</div>
					<template v-if="!isRegistration">
						<div class="doctor_list" v-for="item in doctorData.afternoon" :key="item.createTime">
							<div class="left">
								<p class="item_info">
									<span>{{ item.title }}</span>
									<span class="m">|</span>
									<span>{{ item.docname }}</span>
								</p>
								<p class="skills gray">{{ item.skill }}</p>
							</div>
							<div class="right">
								<span class="money">￥{{ item.amount }}</span>
								<el-button
									:type="isRegistration ? 'info' : 'primary'"
									:disabled="isRegistration"
									@click="goStep2(item)">
									剩余{{ item.availableNumber }}
								</el-button>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getHospitalWork, getHospitalDoctor } from '@/api/hospital';
import type { BaseMap, BookingSchedule, Doctor } from '@/api/hospital/type';

let page = ref(1);
let limit = ref(6);
let total = ref(0);

const route = useRoute();
const router = useRouter();

let baseMap = ref<BaseMap | undefined>();
let bookingScheduleList = ref<BookingSchedule[]>([]);

let workTime = ref<BookingSchedule | undefined>();

// 医生排班数据
const doctorData = reactive<{ morning: Doctor[]; afternoon: Doctor[] }>({
	// 上午
	morning: [],
	// 下午
	afternoon: [],
});

let doctorData_isLoading = ref(false);

// 当前日期是否可以挂号
const isRegistration = computed(() => {
	if (!workTime.value) return false;
	return workTime.value.status === -1 || (workTime.value.status === 0 && workTime.value.availableNumber === -1);
});

// 获取某一个医院的某一个科室预约挂号数据
function getWorkData() {
	getHospitalWork(page.value, limit.value, route.query.hoscode as string, route.query.depcode as string).then(
		(res) => {
			if (res.code === 200) {
				total.value = res.data.total;
				baseMap.value = res.data.baseMap;
				bookingScheduleList.value = res.data.bookingScheduleList;

				workTime.value = res.data.bookingScheduleList[0];

				getDoctorData();
			}
		}
	);
}

// 获取医生排班数据
function getDoctorData() {
	if (workTime.value && workTime.value?.status !== 1) {
		doctorData_isLoading.value = true;
		getHospitalDoctor(route.query.hoscode as string, route.query.depcode as string, workTime.value.workDate)
			.then((res) => {
				if (res.code === 200) {
					res.data.forEach((item) => {
						if (item.workTime === 0) {
							doctorData.morning.push(item);
						} else {
							doctorData.afternoon.push(item);
						}
					});
				}
			})
			.finally(() => {
				doctorData_isLoading.value = false;
			});
	}
}

// 切换当前页回调
function currentChange() {
	getWorkData();
}

// 切换日期
function changeDate(data: BookingSchedule) {
	if (!workTime.value || workTime.value.workDate !== data.workDate) {
		workTime.value = data;
		getDoctorData();
	}
}

// 路由跳转进入到选择就诊人页面
function goStep2(obj: Doctor) {
	router.push({
		path: '/hospital/register_step2',
		query: {
			docId: obj.id,
			hoscode: route.query.hoscode,
			depcode: route.query.depcode,
		},
	});
}

onMounted(() => {
	getWorkData();
});
</script>

<style scoped lang="scss">
.wrap {
	.top {
		display: flex;
		color: #666;
		.line {
			margin: 0 5px;
		}
		.dot {
			margin: 0 5px;
			display: flex;
			align-items: center;
			&::before {
				content: '';
				display: block;
				width: 3px;
				height: 3px;
				background-color: #666;
				border-radius: 50%;
			}
		}
	}
	.center {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 40px 0;
		.time {
			font-weight: 600;
			font-size: 18px;
		}
		.container {
			display: flex;
			width: 100%;
			margin: 30px 0;
			justify-content: center;
			.item {
				flex: 1;
				margin: 0 6px;
				font-size: 15px;
				max-width: 150px;
				--color-1: #f0f6ff;
				--color-2: #0984e3;
				--color-3: #d9e9ff;
				--color-4: #0984e3;
				transition: all 300ms;
				cursor: pointer;
				.item_top {
					background-color: var(--color-1);
					height: 35px;
					display: flex;
					justify-content: center;
					align-items: center;
					color: var(--color-2);
					border-radius: 4px 4px 0 0;
					.date {
						margin-right: 12px;
					}
					.week {
						font-size: 14px;
						transform: translateY(-0.1em);
					}
				}
				.item_bottom {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 45px;
					border: 1px solid var(--color-3);
					border-top: none;
					color: var(--color-4);
					border-radius: 0 0 4px 4px;
					transition: all 300ms;
				}
				&.not {
					--color-1: #ededed;
					--color-2: var(--text-color-gray);
					--color-3: #ededed;
					--color-4: var(--text-color-gray);
				}
				&.active:not(.not) {
					transform: scale(1.1);
					--color-1: #0984e3;
					--color-2: #fff;
					--color-3: #0984e3;
					.item_bottom {
						font-weight: 600;
					}
				}
				&.not.active {
					transform: scale(1.1);
					--color-1: var(--text-color-gray);
					--color-2: #fff;
					--color-3: var(--text-color-gray);
					.item_bottom {
						font-weight: 600;
					}
				}
			}
		}
	}
	.bottom {
		.will {
			text-align: center;
			font-size: 18px;
			font-weight: 600;
		}
		.doctor {
			.time_range {
				margin-bottom: 60px;
				.tip {
					display: flex;
					align-items: center;
					font-size: 18px;
					color: var(--text-color-gray);
					svg {
						margin-right: 4px;
					}
					margin-bottom: 20px;
				}
				.doctor_list {
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #ccc;
					padding-bottom: 10px;
					margin-left: 32px;
					&:not(:last-child) {
						margin-bottom: 20px;
					}
					.left {
						.item_info {
							color: #0984e3;
							font-size: 18px;
							margin-bottom: 10px;
							font-weight: 900;
							.m {
								margin: 0 4px;
							}
						}
					}
					.right {
						display: flex;
						align-items: center;
						justify-content: space-between;
						width: 200px;
						.money {
							color: #666;
							font-weight: 900;
							margin-right: 40px;
						}
					}
				}
			}
		}
	}
}
</style>
